<template>
	<div>
		<div class="content">
			<div class="text">
				<div @click="arr1()">
					<a-checkbox :checked="is_checked_1"/><span >全选</span>
				</div>
				<div v-for="(item,index) in data" :key="index">
					<div>
						<a-checkbox :checked="item.is_checked" @click="checked1(index,item.id)"/><span  @click="handleChange1(index)">{{item.name}}</span>
					</div>
				</div>
			</div>
			<div class="text">
				<div @click="arr1()" v-if="arr2.length != 0">
					<a-checkbox :checked="is_checked_2"/><span  >全选</span>
				</div>
				<div v-for="(item,index) in arr2" :key="index">
					<div>
						<a-checkbox :checked="item.is_checked" @click="checked2(index,item.id)"/><span  @click="handleChange2(index)">{{item.name}}</span>
					</div>
				</div>
			</div>
			<div class="text">
				<div @click="arr1()"  v-if="arr3.length != 0">
					<a-checkbox :checked="is_checked_3"/><span  >全选</span>
				</div>
				<div v-for="(item,index) in arr3" :key="index">
					<div @click="handleChange3(index)">
						<a-checkbox :checked="item.is_checked" @click="checked3(index,item.id)"/><span  @click="handleChange2(index)">{{item.name}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="content2">
			
			<div v-for="(item) in titleArr" :key="item">
				<div style="display: flex; justify-content: space-between;">
					<div style="float: 1;">
						{{item.name}}
					</div>
					<div style="float: 1;">
						2
						{{item.num}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {CATEGORYURL} from "@/services/api";
import {ajaxrequest} from "@/services/ajaxrequest";

	export default {
		created(){
			this.listNew();
		},
		data() {
			return {
				data:[],
				arr2:[],
				arr3:[],
			}	
		},
		onLoad() {
   
		},
		computed:{
			is_checked_1(){
				let boo = false;
				let arrChecked = [];
				this.data.map(v =>{
					arrChecked.push(v.is_checked);
				})
				if(arrChecked.includes(true)){
					boo = true
				}
				return boo;
			},
			is_checked_2(){
				let boo = false;
				let arrChecked = [];
				this.arr2.map(v =>{
					arrChecked.push(v.is_checked);
				})
				if(arrChecked.includes(true)){
					boo = true
				}
				return boo;
			},
			is_checked_3(){
				let boo = false;
				let arrChecked = [];
				this.arr3.map(v =>{
					arrChecked.push(v.is_checked);
				})
				if(arrChecked.includes(true)){
					boo = true
				}
				return boo;
			}
		},
		methods: {
			listNew(){
				//行为类目词
				var parems = {"action_scene":['E-COMMERCE','NEWS','APP'],'action_days':30};
				ajaxrequest("1657869217074189", CATEGORYURL,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.data = result.data;
					}else{
						this.$message.error(result.message,3);
					}
				})
			},
			// 全选
			arr1(){
				this.s_checked_1 = !this.s_checked_1;
				if(this.s_checked_1 == true){
					this.cheakedTrue(this.data);
					this.cheakedTrue(this.arr2);
					this.cheakedTrue(this.arr3);
				}else{
					this.cheakedFalse(this.data,this.arr1CheckedIndex);
					this.cheakedFalse(this.arr2,this.arr2CheckedIndex);
					this.cheakedFalse(this.arr3,this.arr3CheckedIndex);
				}
			},
		}
	}
</script>

<style>
	.content2{
		display: inline-block;
	}
	.content {
		display: block;
		width: 100%;
		height: 300px;
		
	}
	.text{
		width: 200px;
		height: 300px;
		overflow-y: scroll;
		padding:10px;
		border: 1px solid #007AFF;
		flex: 1;
		display: inline-block;
		flex-direction: column;
		font-size: 22px;
		color:red;

	}

	
</style>
